<!--
 @description 参与人员合照
 @fileName index.vue
 @author zengqiongying
 @created 2023/06/26 16:13:24
-->
<template>
  <div class="partner-photo-list">
    <div v-for="(item, i) in fileList" :key="i" class="photo-item">
      <CheckImage
        :modelValue="item.sysFileUrl"
        :readonly="readonly"
        hide-upload
        deleteClassName="photo-del-btn"
        @delete="deletePhoto(i)"
      >
        <template #delete>
          <qmp-svg-icon name="cuowuguanbiquxiao" />
        </template>
      </CheckImage>
    </div>
    <div v-if="!readonly" class="photo-item">
      <CheckImage v-model="newFile.sysFileUrl" v-model.imageName="newFile.imgCustomName" :caid="modelId">
        <template #trigger>
          <div class="upload-btn">
            <qmp-icon name="plus" />
          </div>
        </template>
      </CheckImage>
    </div>
  </div>
</template>

<script lang="ts">
  import CheckImage from '../CheckImage/index.vue'
  import { toRefs, reactive, computed, nextTick, watch } from 'vue'
  import { IAnyKeyObject } from '@/types/common'
  export default {
    name: 'PartnerPhoto',
    components: { CheckImage },
    props: {
      modelValue: {
        type: Array,
        default: () => []
      },
      modelId: {
        // 验收ID
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    setup(props: any, ctx: any) {
      const datas = reactive<IAnyKeyObject>({
        fileList: [],
        newFile: {
          sysFileUrl: '',
          imgCustomName: ''
        }
      })
      watch(
        () => datas.newFile.sysFileUrl,
        (val) => {
          if (!val) return
          datas.fileList = [...datas.fileList, ...[datas.newFile]]
          nextTick(() => {
            datas.newFile = {
              sysFileUrl: '',
              imgCustomName: ''
            }
            updateModelValue()
          })
        }
      )
      const deletePhoto = (i: number) => {
        datas.fileList.splice(i, 1)
        updateModelValue()
      }
      const updateModelValue = () => {
        const { modelId } = props
        const successFile = datas.fileList.map((e: any) => {
          const obj = { ...e }
          if (modelId) {
            obj.modelId = modelId
          }
          if ([null, undefined, ''].includes(obj.imgCustomName)) {
            obj.imgCustomName = obj.imgOriginName || ''
          }
          return obj
        })
        nextTick(() => {
          ctx.emit('update:modelValue', successFile)
        })
      }

      const loadData = async () => {
        if (props.modelValue.length > 0) {
          datas.fileList = props.modelValue.map((v: any) => v)
        }
      }
      loadData()
      return {
        ...toRefs(datas),
        deletePhoto
      }
    }
  }
</script>
<style lang="less" scoped>
  .partner-photo-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .photo-item {
      display: inline-block;
      position: relative;
      width: 56px;
      height: 56px;
      margin-right: 8px;
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg-global-weak);
      box-sizing: border-box;
    }
    .btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-position: center;
    }
    .btn-del {
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 36px;
      background-size: 24px 24px;
      background-image: url('~@/assets/images/icon-del-solid.png');
    }

    .upload-btn {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--bg-global-weak);
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /deep/.qmp-icon {
      font-size: 24px;
      color: var(--texticon-default-weak);
      cursor: pointer;
      &:hover {
        color: var(--texticon-color-brand-norma);
      }
    }
    /deep/ .photo-del-btn {
      position: absolute;
      left: auto;
      right: 2px;
      top: 2px;
      width: 16px;
      height: 16px;
      background: var(--mask-black-normal);
      transform: none;
      border-radius: 16px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      /deep/ .qmp-svg-icon {
        font-size: 12px;
      }
    }
  }
</style>
